<template>
  <basic-layout>
    <view class="home">
      <image :src="pic" class="tops" mode="aspectFill"></image>
      <!-- 顶部进度条 -->
      <view class="progress-bar">
        <view
          class="progress-item"
          v-for="(item, index) in progressList"
          :key="index"
        >
          <view class="icon-circle">
            <image :src="item.icon" class="img1" mode="aspectFill"></image>
          </view>
          <text class="title">{{ item.title }}</text>
        </view>
      </view>

      <!-- 中部功能区 -->
      <view class="feature-section">
        <view class="section-title">
          <image :src="pic" class="ico" mode="aspectFill"></image>
          <text>嘉若某某流程为我们合作伙伴</text>
        </view>
        <view class="feature-grid">
          <view
            class="feature-item"
            v-for="(item, index) in featureList"
            :key="index"
            @click="handleFeatureClick(item)"
          >
            <image :src="item.icon" class="img2" mode="aspectFill"></image>
            <text>{{ item.title }}</text>
          </view>
        </view>
      </view>

      <!-- 施工案例展示 -->
      <view class="case-section">
        <view class="section-title">
          <text>防水维修</text>
        </view>
        <view class="case-more">
          <view class="case-box" v-for="(item, index) in caseList" :key="index">
            <image class="case-img" :src="item.image" mode="aspectFill"></image>
            <text>{{ item.title }}</text>
          </view>
        </view>
      </view>

      <!-- 施工案例展示 -->
      <view class="case-section">
        <view class="section-title">
          <text>施工现场</text>
        </view>
        <view class="case-list">
          <view
            class="case-item"
            v-for="(item, index) in workList"
            :key="index"
          >
            <image :src="item.image" mode="aspectFill"></image>
            <!-- <text>{{ item.title }}</text> -->
          </view>
        </view>
      </view>
    </view>
  </basic-layout>
</template>

<script lang="ts" setup>
import BasicLayout from "@/layouts/basic-layout.vue";
import { ref } from "vue";
import zhuanshi from "@/assets/imgs/zuanshi.svg";
import pic from "@/assets/imgs/img.png";

// 进度条数据
const progressList = [
  { title: "质量保证", icon: zhuanshi },
  { title: "现场评估", icon: zhuanshi },
  { title: "明码标价", icon: zhuanshi },
  { title: "售后保障", icon: zhuanshi },
];

// 功能区数据
const featureList = [
  { title: "关于我们", icon: zhuanshi },
  { title: "联系客服", icon: zhuanshi },
  { title: "一键分享", icon: zhuanshi },
];

// 案例展示数据
const caseList = [
  { title: "防水维修", image: pic },
  { title: "装修防水", image: pic },
];

// 案例展示数据
const workList = [
  { title: "防水维修", image: pic },
  { title: "装修防水", image: pic },
  { title: "防水维修", image: pic },
  { title: "装修防水", image: pic },
  { title: "防水维修", image: pic },
  { title: "装修防水", image: pic },
];

// 功能点击处理
const handleFeatureClick = (item: any) => {
  console.log("点击功能：", item.title);
};
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
}
.ico {
  width: 30rpx;
  height: 30rpx;
  margin-right: 12rpx;
}
.tops {
  width: 100%;
  height: 300rpx;
}

.img1 {
  width: 80rpx;
  height: 80rpx;
}

.img2 {
  width: 120rpx;
  height: 120rpx;
}

.progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 32rpx;

  .progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;

    .icon-circle {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background-color: #f0f8ff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 16rpx;
    }

    .title {
      font-size: 24rpx;
      color: #333;
    }
  }
}

.feature-section {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 32rpx;

  .section-title {
    margin-bottom: 32rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
  }

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32rpx;

    .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 32rpx;
      background-color: #f8f8f8;
      border-radius: 16rpx;

      text {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.case-section {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;

  .section-title {
    margin-bottom: 32rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }
  .case-more {
    .case-box {
      display: flex;
      padding: 20rpx;
      border-radius: 10rpx;
      gap: 20rpx;
      .case-img{
        width: 350rpx;
        height: 200rpx;
        border-radius: 16rpx;
        margin-bottom: 16rpx;
      }
     

      text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  .case-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32rpx;

    .case-item {
      image {
        width: 100%;
        height: 240rpx;
        border-radius: 16rpx;
        margin-bottom: 16rpx;
      }

      text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}
</style>
